<template>
  <div>
    <el-form ref="holiDayForm" :model="holiDayForm" :label-position="'right'">
      <el-row>
        <el-col :span="24">
          <el-select v-model="type" placeholder="请选择类型">
            <el-option
              v-for="(item, index) in storeList"
              :key="index"
              :label="item.name"
              :value="item.key"
            >
            </el-option>
          </el-select>

          <el-input
            placeholder="请输入金额"
            v-model="price"
            style="width: 220px; margin-left: 38px"
          ></el-input>

          <el-button @click="confimPrice" style="margin-left: 38px"
          >确定</el-button
          >
        </el-col>
        <el-col :span="24">
          <el-form-item label="节假日:" prop="holidays">
            <el-checkbox-group
              v-model="holiDayForm.holidays"
              @change="changeHoliday"
            >
              <el-checkbox
                v-for="item in dateList"
                :key="item.dateId"
                :label="item.dateId"
              >{{ item.dateName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-card
      v-if="basicList.length > 0"
      class="box-card"
      v-for="(item, index) in basicList"
      :key="index"
    >
      <div slot="header" class="holidayHeader">
        <div>
          <span
            style="
              margin-right: 8px;
              font-size: 14px;
              font-weight: bold;
              color: #0d65eb;
            "
          >{{ item.dateName }}</span
          >
          <el-date-picker
            :clearable="false"
            v-model="item.daterange"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>

        <i
          :class="item.isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          style="font-size: 18px"
          @click="item.isOpen = !item.isOpen"
        ></i>
      </div>
      <el-table
        v-show="item.isOpen"
        :data="item.carModels"
        :header-cell-style="{ background: '#F5F5F5', color: '#606266' }"
        border
      >
        <el-table-column
          align="center"
          prop="carModelName"
          label="车型信息"
          min-width="180"
          fixed="left"
        >
        </el-table-column>
        <template v-if="priceAccord == 1">
          <TYTableColumn :price-type="2"></TYTableColumn>
        </template>
        <template v-else-if="priceAccord == 2">
          <XCTableColumn
            v-if="sysPlatformArray.includes('xc')"
            key="xc"
            :price-type="2"
          ></XCTableColumn>
          <HLTableColumn
            v-if="sysPlatformArray.includes('hl')"
            key="hl"
            :price-type="2"
          ></HLTableColumn>
          <WKTableColumn
            v-if="sysPlatformArray.includes('wk')"
            key="wk"
            :price-type="2"
          ></WKTableColumn>
          <ZZCTableColumn
            v-if="sysPlatformArray.includes('zzc')"
            key="zzc"
            :price-type="2"
          ></ZZCTableColumn>
          <ATTableColumn
            v-if="sysPlatformArray.includes('at')"
            key="at"
            :price-type="2"
          ></ATTableColumn>
          <FZTableColumn
            v-if="sysPlatformArray.includes('fz')"
            key="fz"
            :price-type="2"
          ></FZTableColumn>
        </template>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import TYTableColumn from "@/views/system/otaPriceUpdate/components/TYTableColumn.vue";
import XCTableColumn from "@/views/system/otaPriceUpdate/components/XCTableColumn.vue";
import HLTableColumn from "@/views/system/otaPriceUpdate/components/HLTableColumn.vue";
import WKTableColumn from "@/views/system/otaPriceUpdate/components/WKTableColumn.vue";
import ZZCTableColumn from "@/views/system/otaPriceUpdate/components/ZZCTableColumn.vue";
import ATTableColumn from "@/views/system/otaPriceUpdate/components/ATTableColumn.vue";
import FZTableColumn from "@/views/system/otaPriceUpdate/components/FZTableColumn.vue";
import { listDate } from "@/api/plan/date";

export default {
  components: {
    TYTableColumn,
    XCTableColumn,
    HLTableColumn,
    WKTableColumn,
    ZZCTableColumn,
    ATTableColumn,
    FZTableColumn,
  },
  props: {
    sysPlatformArray: {
      type: Array,
      default: () => {
        return [];
      },
    },
    carModelList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    priceAccord: {
      type: [String, Number],
      default: 1,
    },
  },
  data() {
    return {
      storeList: [
        /* { name: "车辆押金", key: "1" },
         { name: "违章押金", key: "2" },*/
        { name: "租金", key: "3" },
      ],
      type: "",
      price: "",
      dateList: [],
      holiDayForm: {
        holidays: [],
      },
      basicList: [],
    };
  },
  computed: {
    holidaysModelList() {
      const holidaysModelList = _.cloneDeep(this.carModelList).map((item) => {
        item.priceType = 2;
        return item;
      });
      console.log("holidaysModelList", holidaysModelList);
      return holidaysModelList;
    },
  },
  watch: {
    holidaysModelList(newValue) {
      this.basicList = this.configBasicList();
    },
  },
  methods: {
    confimPrice() {
      console.log(1111111);
      console.log(this.basicList);
      console.log(22222222);
      this.basicList.forEach((ele) => {
        ele.carModels.forEach((ele2) => {
          if (this.type == 1) {
            // alert(ele2.carModelId)
            // this.$set(ele2,'xcWeekdayPrice',this.price)
            // ele2.xcWeekdayPrice2 = this.price
            ele2.flatPriceCarDeposit = this.price;

            ele2.xcCarDeposit = this.price
            ele2.wkCarDeposit = this.price
            ele2.zzcCarDeposit = this.price
            ele2.fzCarDeposit = this.price
            ele2.hlCarDeposit = this.price
            ele2.atCarDeposit = this.price
          }
          if (this.type == 2) {
            ele2.flatPriceViolationDeposit = this.price;

            ele2.xcViolationDeposit = this.price;
            ele2.wkViolationDeposit = this.price;
            ele2.zzcViolationDeposit = this.price;
            ele2.fzViolationDeposit = this.price;
            ele2.hlViolationDeposit = this.price;
            ele2.atViolationDeposit = this.price;
          }
          if (this.type == 3) {
            ele2.flatPriceWeekdayPrice = this.price;

            ele2.xcWeekdayPrice = this.price;
            ele2.wkWeekdayPrice = this.price;
            ele2.zzcWeekdayPrice = this.price;
            ele2.fzWeekdayPrice = this.price;
            ele2.hlWeekdayPrice = this.price;
            ele2.atWeekdayPrice = this.price;
          }
        });
      });
      console.log(22222222);
      console.log(this.basicList);
      console.log(1111111);
    },

    //获取节假日
    getPlanDateList() {
      listDate({
        pageNum: 1,
        pageSize: 100,
        dateType: 1,
        isEffective: 1,
      }).then((res) => {
        this.dateList = res.rows;
      });
    },
    // 节假日发生改变
    changeHoliday(val) {
      console.log("Holiday", val);
      this.basicList = this.configBasicList();
    },

    //配置列表数据
    configBasicList() {
      let resultArray = [];
      //获取选中的节假日对象集合
      let selectedHolidays = this.dateList.filter((obj) =>
        this.holiDayForm.holidays.includes(obj.dateId)
      );
      console.log("selectedHolidays", selectedHolidays);
      if (selectedHolidays.length > 0) {
        //组装双层列表,外层:节假日; 里层:车型列表
        selectedHolidays = selectedHolidays.map((item) => {
          return {
            ...item,
            isOpen: true,
            carModels: _.cloneDeep(this.holidaysModelList),
          };
        });
      }
      console.log("selectedHolidays", selectedHolidays);
      return selectedHolidays;
    },
    //提取车型数据并赋值节假日及生效时间
    saveTable() {
      console.log("this.basicList", this.basicList);
      let results = [];
      // 检查this.basicList是否有内容
      if (this.basicList.length > 0) {
        results = this.basicList.reduce((accumulatedArray, currentItem) => {
          // 对当前外层数组元素的carModels进行映射，为每个元素添加指定字段
          let newItems = currentItem.carModels.map((item) => ({
            ...item,
            remark: currentItem.dateName, // 节假日名称
            startTime: currentItem.daterange[0], // 节假日开始时间
            endTime: currentItem.daterange[1], // 节假日结束时间
          }));

          return accumulatedArray.concat(newItems); // 将转换后的数组合并到累积的数组中
        }, []);
      }
      console.log("results", results);
      return results;
    },
  },
  created() {
    this.$nextTick(() => {
      this.getPlanDateList();
    });
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 10px;
}

.holidayHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
